<html>
<head>
<title>CalPortal</title>
<style>
html {
  height: 100%;
}
body {
  background-color: #E9F0EF;
  padding: 0;
  height: 100%;
  margin: 0;
}
#main {
  background-color: #cfe2f3;
  width: 50em;
  margin: 0 auto;
  height: 100%;
}
#header {
  height: 4em;
  border: 1px solid silver;
}
#container {
  width: 100%;
}
#navi {
  float: left;
  width: 20%;
}
#content_container {
  float: right;
  width: 80%;
}
#content {
  padding: 10px;
}
#footer {
  height: 20em;
  width: 100%;
}
#add_new {
  width: 100%;
  border: 1px solid silver;
  height: 40px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  overflow: hidden;
}
#classes {
  margin: 10px auto;
  border-collapse: collapse;
  width: 80%;
  text-align: center;
}
.class_head {
  font-size: 30px;
  padding: 5px;
}
.class {
  border: 1px solid black;
}
.item {
  border: 1px solid black;
  margin: 15px;
}
.item_class {
  float: left;
  width:25%
}
.item_title {
  float: left;
  width: 40%;
}
.item_date {
  float: right;
  width: 25%;
  text-align: right;
  color: darkblue;
}
.item_top {
  overflow:hidden;
  background-color: lightgray;
  padding: 5px;
}
.item_resource {
  padding: 5px;
  background-color: #eeeedd;
}
.item_comments {
  background-color: lightgray;
  padding: 10px;
}
.item_comment {
  padding: 5px;
}
.comment_name {
  font-weight: bold;
}
.soon {
  color: #ff1100;
}
</style>
</head>
<body>
<div id='main'>
  <div id='header'>
    <div id='header_name'>CalPortal</div>
    <div id='header_links'><u>Link to config</u></div>
  </div>
  <div id='container'>
    <div id='navi'>
      <table id='classes'>
        <tr><td class='class_head'>Classes</td></tr>
        <tr><td class='class'>CS 70</td></tr>
        <tr><td class='class'>CS 61A</td></tr>
        <tr><td class='class'>Econ 1</td></tr>
        <tr><td class='class'>Psych 1</td></tr>
      </table>
    </div>
    <div id='content_container'><div id='content'>
      <textarea id='add_new'>Add a new assignment...</textarea>
      <div class='item'>
        <div class='item_top'>
          <div class='item_class'>CS61A</div>
          <div class='item_title'>HW3</div>
          <div class='item_date soon'>Tomorrow</div>
        </div>
        <div class='item_resource'>
          <li>Link to homework assignment...
        </div>
        <div class='item_comments'>
          <div class='item_comment'>
            <div class='comment_name'>
              John H. said...
            </div>
            <div class='comment'>
              Is anyone actually doing this...? 
            </div>
          </div>
        </div>
      </div>
      <div class='item'>
        <div class='item_top'>
          <div class='item_class'>Econ 1</div>
          <div class='item_title'>Midterm 2</div>
          <div class='item_date'>Next Thursday</div>
        </div>
        <div class='item_resource'>
          <li>Link to econ website's midterm page...
          <li>Study exam 1
          <li>Study exam 2
        </div>
        <div class='item_comments'>
          <div class='item_comment'>
            <div class='comment_name'>
              Grace W. said...
            </div>
            <div class='comment'>
              We're doing a study group @ tolman 2046 2pm tuesday if anyone wants to join
            </div>
          </div>
          <div class='item_comment'>
            <div class='comment_name'>
              Frank T. said...
            </div>
            <div class='comment'>
              Sounds good :]
            </div>
          </div>
          <div class='item_comment'>
            <div class='comment_name'>
              Ryan T. said...
            </div>
            <div class='comment'>
              <textarea width='100%'>Add your comment here...</textarea>
            </div>
        </div>
      </div>
    </div></div>
  </div>
  <div id='footer'></div>
</div>
</body>
</html>